<template>
  <div xtype="rich-editor" :data-name="name" ref="root">
    <emap-editor
      :ref="refId"
      :options="editorOptions"
      :max='1000'
      @change="onChange"
    ></emap-editor>
  </div>
</template>
<script>
    import { EmapEditor } from 'bh-vue'

    let FORM_RICH_EDITOR_ID = 0

    export default {
        xtype: 'rich-editor',
        props: {
          name: String,
        },
        data: () => ({
          editorOptions: {
            toolbar: [
                ['font', ['bold', 'underline', 'italic', 'clear']],
                ['fontname', ['fontname', 'fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link', 'unlink']],
            ],
          },
          elemId: FORM_RICH_EDITOR_ID++,
        }),
        computed: {
          refId () {
            return `ref-${this.elemId}`
          }
        },
        mounted () {
          this.editor = this.$refs[this.refId]
          $(this.$refs.root).data('customControl', this)
        },
        methods: { // 定义 setter 和 getter，名称随意
          getValue () {
            if (this.editor.isEmpty()) {
              return ''
            }

            let content = this.editor.getValue()
            return content
          },
          setValue (val) {
            this.editor.setValue(val[this.name])
          },
          getRuleAction() {
            return 'change,blur'
          },
          onChange(e) {
            // debugger
            if (this.editor.isEmpty()) {
              e = ''
            }
            $(this.$refs.root).trigger('change', e)
            $(this.$refs.root).trigger('_formChange', {
              target: this.$refs.root
            })
          },
        },
        components: {
          EmapEditor,
        }
    }
</script>

<style lang="less" scoped>
  .rich-editor {
    height: auto;
  }
</style>
